<template>
    <div id="newgoods">
        <div class="header">
            <van-nav-bar title="不凡" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="contentbox">
            <div class="newgood">
                <div class="banner">
                    <img src="http://yanxuan.nosdn.127.net/8976116db321744084774643a933c5ce.png" />
                </div>
                <div class="sortnav">
                    <div @click="changeTab(1)" :class="[1==currentIndex?'active':'']">综合</div>
                    <div
                        @click="changeTab(2)"
                        :class="[2==currentIndex?'active':'',order == 'desc'?'desc':'asc']"
                    >价格</div>
                    <div @click="changeTab(3)" :class="[3==currentIndex?'active':'']">分类</div>
                </div>
                <div class="sortlist">
                    <router-link
                        tag="div"
                        class="item"
                        :to="`/pages/goods?id=${item.id}`"
                        v-for="(item,index) in listData"
                        :key="index"
                    >
                        <img :src="item.list_pic_url" alt />
                        <p class="name">{{item.name}}</p>
                        <p class="price">￥{{item.retail_price}}</p>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { goodsList } from "@/api/goods";
export default {
    data() {
        return {
            isHot: "",
            isNew: "",
            order: "",
            listData: [],
            currentIndex: 0,
        };
    },
    created() {
        this.isHot = this.$route.query.isHot;
        this.isNew = this.$route.query.isNew;
        this.getlistdata();
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        async getlistdata() {
            const data = await goodsList({
                isHot: this.isHot,
                isNew: this.isNew,
                order: this.order,
            });
            this.listData = data.data;
            console.log(data);
        },
        changeTab(index) {
            console.log(index);
            this.currentIndex = index;
            if (index == 2) {
                this.order = this.order == "asc" ? "desc" : "asc";
            } else {
                this.order = "";
            }
            this.getlistdata();
        },
    },
};
</script>
<style lang="scss">
#newgoods {
    height: 100vh;
    background: #f4f4f4;
    border-top: 1px solid transparent;
    font-size: 0.32rem;
    padding-bottom: 1.333333rem;
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }
    .contentbox {
        height: calc(100% - 1.24rem);
        margin-top: 1.22667rem;
        overflow: auto;
        border-top: 0.01333rem solid transparent;
        .newgood {
            width: 100%;
            height: 100%;
            .banner {
                width: 100%;
                height: 3.70667rem;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .sortnav {
                display: flex;
                background: #fff;
                width: 100%;
                height: 1.04rem;
                line-height: 1.04rem;
                div {
                    width: 3.33333rem;
                    height: 100%;
                    text-align: center;
                }
                :nth-child(2) {
                    background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/no-3127092a69.png)
                        2.2rem no-repeat;
                    background-size: 0.2rem 0.28rem;
                }
                .active {
                    color: #b4282d;
                }
                .active.asc {
                    background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/up-636b92c0a5.png)
                        2.2rem no-repeat;
                    background-size: 0.2rem 0.28rem;
                }
                .active.desc {
                    background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/down-95e035f3e5.png)
                        2.2rem no-repeat;
                    background-size: 0.2rem 0.28rem;
                }
            }
            .sortlist {
                margin-top: 0.26667rem;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                .item {
                    width: 4.96667rem;
                    margin-bottom: 0.06667rem;
                    text-align: center;
                    background: #fff;
                    padding: 0.2rem 0;
                    img {
                        display: block;
                        width: 4.02667rem;
                        height: 4.02667rem;
                        margin: 0 auto;
                    }
                    .name {
                        margin: 0.2rem 0 0.29333rem 0;
                        text-align: center;
                        padding: 0 0.26667rem;
                        font-size: 0.32rem;
                    }
                    .price {
                        text-align: center;
                        font-size: 0.4rem;
                        color: #b4282d;
                    }
                }
            }
        }
    }
}
</style>